<template>

	<view class="header" v-if="seen">


		<view class="" style="display: flex; margin: 5px 10px;">

			<view class="iconfont icon-renzheng-"
				style="margin-top: 15px; margin-left: 3px;color: #F14399;font-size: 40px;"></view>
			<view style="margin-top: 15px;margin-left: 5px;"><text style="color: #4D4D4D;font-size: 28px;">实名认证</text>
			</view>

		</view>

		<view class="" style="margin: 0px 10px; margin-top: 20px;line-height: 30px;">
			<text style="color: 4D4D4D;">为了保障交友信息的真实性，请填写与您身份证一致的信息，否则不会通过审核。注意：此提交信息不会用作其他目的。</text>
		</view>

		<view class="" style="margin: 0px 10px; margin-top: 20px;line-height: 30px;">
			<text style="color: 4D4D4D;font-weight: bold;font-size: 18px;">真实姓名</text>
		</view>

		<view class="" style="margin: 0px 10px; margin-top: 20px;line-height: 30px;">
			<input  name="name" v-model="name" placeholder="请填写你本人的真实姓名" />
		</view>

		<hr style="height:1px;border:none;border-top:1px dashed #DADCE0;width: 90%;margin: 10px auto;">

		<view class="" style="margin: 0px 10px; margin-top: 20px;line-height: 30px;">
			<text style="color: 4D4D4D;font-weight: bold;font-size: 18px;">手机号</text>
		</view>


		<view class="" style="display: flex;">

			<view class="" style="margin: 0px 10px; margin-top: 20px;line-height: 30px;width: 65%;">
				<input name="phone" v-model="phone" placeholder="请填写你本人的手机号" />
			</view>

		</view>
		
		<!-- <hr style="height:1px;border:none;border-top:1px dashed #DADCE0;width: 90%;margin: 10px auto;">

		<view class="" style="display: flex;">
		
			<view class="" style="margin: 0px 10px; margin-top: 20px;line-height: 30px;width: 65%;">
				<input  name="code" v-model="code" placeholder="请输入验证码" />
			</view>
		
			<view class="" style="margin: 0px 10px; margin-top: 20px;line-height: 30px;padding-right: 10px;">
				<view v-if="verifyShow" @click="verifyBtn()"
					style="background-color: #F14399;color: #fff;border-radius:3px;width: 100px;text-align: center;">
					<text>获取验证码</text>
				</view>
		
				<view v-else style="background-color:#C0C0C0;color: #fff;border-radius:3px;width: 100px;text-align: center;">
					<text>{{verifyTip+'秒'}}</text>
				</view>
			</view>
		</view> -->
		

		<hr style="height:1px;border:none;border-top:1px dashed #DADCE0;width: 90%;margin: 10px auto;">

		<view class="" style="margin: 0px 10px; margin-top: 20px;line-height: 30px;">

			<text style="color: 4D4D4D;font-weight: bold;font-size: 18px;">身份证号</text>

			<input name="card" v-model="card" placeholder="请填写你本人的身份证号" />
		</view>



		<hr style="height:1px;border:none;border-top:1px dashed #DADCE0;width: 90%;margin: 10px auto;">

		<view class="" style="margin: 0px 10px;bottom:20px;position:fixed;bottom:10px;width: 95%;">
			<view class="bnt" @click="btn()">
				<button type="default" style="background-color: #F14399;color: #fff;">提交认证</button>
			</view>
			<!-- <view class="bnt" style="margin-top: 15px;">
				<button type="default" style="color: #BABABA;">取消</button>
			</view> -->
		</view>
	</view>

	<view class="home" v-else>


		<view class="yi_renzheng">

			<view class="" style="margin: 0px 10px;">

				<view style="text-align: center;color: #000000;margin-bottom: 10px;">

					<text style="font-weight: bold;">你已完成实名认证</text>

				</view>

				<text style="color: #4D4D4D;font-size: 14px;line-height: 10px;">
					为确保用户身份真实性，为您提供更好的安全保障需要完成实名认证。您的认证信息非常重要，我们将严格保密，并使用加密、权限等方式避免其被用于其他用途。
				</text>

				<view class="" style="margin-top: 20px;">

					<view class="" style="display: flex;">
						<view class=""><text style="color: 4D4D4D;font-weight: bold;font-size: 14px;">真实姓名</text></view>

						<view style="margin-left: 10px;"><input style="font-size: 12px;margin-top: 5px;" 
								name="name" v-model="name"  /></view>
					</view>
					<hr style="height:1px;border:none;border-top:1px dashed #DADCE0;width: 90%;margin: 10px auto;">
					<view class="" style="display: flex;">
						<view class=""><text style="color: 4D4D4D;font-weight: bold;font-size: 14px;">身份证号</text></view>

						<view style="margin-left: 10px;"><input style="font-size: 12px;margin-top: 5px;" 
								name="card" v-model="card" />
						</view>
					</view>
				</view>

			</view>

		</view>

	</view>


</template>


<script>
	export default {
		data() {
			return {
				name: "",
				card: "",
				phone: "",
				code:"",
				r_name:{},
				verifyShow: true,
				seen: true,
				verifyTip: "60",
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getinfo();
		},
		methods: {
			async btn() {
				if (this.name == "" || this.name.length < 2 || this.name.length > 4) {
					uni.showToast({
						title: "姓名不能为空，或者格式不对",
						duration: 3000,
						icon: 'none'
					})
					return false;
				}

				if (this.card == "" || this.card.length != 18) {
					uni.showToast({
						title: "不能为空或身份证格式不对",
						duration: 3000,
						icon: 'none'
					})
					return false;
				}
				if (this.phone == "" || this.phone.length != 11) {
					uni.showToast({
						title: "手机格式不正确",
						duration: 3000,
						icon: 'none'
					})
					return false;
				}
				
				// if (this.code == "") {
				// 	uni.showToast({
				// 		title: "验证码不正确",
				// 		duration: 3000,
				// 		icon: 'none'
				// 	})
				// 	return false;
				// }
				
				const res = await this.$myRuquest({
					url: 'index/dsnv.activities/sm_card_2?id=' + this.id + "&phone=" + this.phone + "&name=" + this.name +
						"&card=" + this.card+"&code=" + this.code
				})

				if (res.data.code == 200) { 
					uni.showToast({
						title: res.data.info,
						duration: 2000,
						icon: 'none'
					})
					this.seen = false;
				} else {
					uni.showToast({
						title: res.data.info,
						duration: 2000,
						icon: 'none'
					})
					this.seen = true;
				}
			},
			async verifyBtn() {
				
				if (this.phone == "" || this.phone.length != 11) {
					uni.showToast({
						title: "手机格式不正确",
						duration: 3000,
						icon: 'none'
					})
				}else{
					
					const res = await this.$myRuquest({
						url: '/index/api/sendcode?phone=' + this.phone
					})

					if (res.data.code == 200) {
						uni.showToast({
							title:"发送成功，如果本次60秒都没收到，则填入666888",
							duration: 3000,
							icon: 'none'
						})
						this.timedown(60) // this.timedown(60)
						this.verifyShow = false
					} else {
						uni.showToast({
							title:"发送失败，本次请填入666888",
							duration: 3000,
							icon: 'none'
						})
						this.timedown(60) // this.timedown(60)
						this.verifyShow = false
					}
					
				}

			},

			timedown: function(num) {
				let that = this;
				if (num == 0) {
					that.verifyShow = true; // 是否显示获取验证码
					return clearTimeout();
				} else {
					that.verifyShow = false; // 是否显示获取验证码
					setTimeout(function() {
						that.verifyTip = num - 1
						that.timedown(num - 1);
					}, 1000); //定时每秒减一  
				}
			},

			//检查是否已经认证
			async getinfo() {
				const res = await this.$myRuquest({
					url: '/index/dsnv.activities/get_rz_info?id=' + this.id
				})
				if (res.data.code == 200) {
					this.name=res.data.data.realname
					this.card=res.data.data.id_card
					this.phone=res.data.data.code_phone
					this.seen = false;
				} else {
					this.seen = true;
				}
			}

		}
	}
</script>


<style lang="scss">
	.header {
		height: 800px;
		background-color: #F6F6F6;
	}

	.home {
		height: 800px;
		background-color: #F6F6F6;
		font-size: 16px;

		.yi_renzheng {
			height: 300px;
			margin-top: 60px;
			background-color: #fff;
			border-radius: 10px;
			margin-left: 10px;
			margin-right: 10px;

		}

	}
</style>
